<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>欢迎页面</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="${ctx}/css/font.css">
  <link rel="stylesheet" href="${ctx}/css/xadmin.css">
  <!-- 导入jquery插件 -->
  <script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js"></script>
  <script type="text/javascript" src="${ctx}/js/jquery-migrate-1.2.1.js"></script>
  <script type="text/javascript" src="${ctx}/js/fkjava_timer.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.4.0/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

  <style type="text/css">
    p{
      font-family: "宋体","仿宋",sans-serif;
      text-align: left;
      font-size: 14px;
    }
  </style>
  <script type="text/javascript">
    //使用ajax加载数据
    $.ajax({
      method:'post',
      url:'${ctx}/echartsData?id=${sessionScope.user_session.userID}',
      dataType:'json',
      success:function(data){
        initChat(data);
      }
    });
    function initChat(data){
      var myChart = echarts.init(document.getElementById('mainChart'));
      option = {
        title : {
          text: '参与评价男女同学比例',
          subtext: '内部数据',
          x:'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: data
        },
        series : [
          {
            name: '男女数量',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
              myChart.setOption(option);
    };
  </script>
</head>
<body>

<div style="width:100%;height:190%;margin-top:-30px; border:0;" class="main_tabbor">
  <h1 align="center" style="color:  rgb(26,160,147); font-size:30px; margin-top:30px">${sessionScope.user_session.userName}评价结果</h1>
  <hr>

  <div   style="height:400px;width:320px;margin-top: 120px;margin-left:50px;">
    <div id="mainChart" style="border: 2px solid rosybrown; width:100%; height:100%;"></div>
  </div>


  <div id="app1" style="width: 800px;height: 400px; border:2px solid rosybrown;margin-top:-400px;margin-left:400px;">

    <ve-line :data="chartData" :settings="chartSettings"></ve-line>
  </div>


  <script>
    //使用ajax加载数据
    $.ajax({
      method:'post',
      url:'${ctx}/echartsData1?id=${sessionScope.user_session.userID}',
      dataType:'json',
      success:function(data){
        initChat2(data);
      }
    });

    function initChat2(data){
      var yA = [];
      var yB = [];
      var yC = [];
      var yD = [];
      var yE = [];

      //将获取到的json数据列表清洗数据后push到xA,yA两个坐标轴 数据列表中
      //注意，此处循环函数可以用于位置数量的数据，不必提前预知数据量大小
      for(var i=0;i<data.length;i++){
        yA.push(data[i].one);
        yB.push(data[i].two);
        yC.push(data[i].three);
        yD.push(data[i].four);
        yE.push(data[i].five);
      };
      new Vue({
        el: '#app1',
        data () {
          this.chartSettings = {
            title : '评价指标折线统计',
            metrics: ['极差', '较差', '中等','良好','优秀'],
            dimension: ['指标']
          }
          return {
            chartData: {
              columns: ['指标', '极差', '较差', '中等','良好','优秀'],
              rows: [
                { '指标': '教学内容设计能力', '极差': yA[0], '较差': yB[0], '中等': yC[0],'良好':yD[0],'优秀':yE[0]},
                { '指标': '组织教学的能力', '极差': yA[1], '较差': yB[1], '中等': yC[1],'良好':yD[1],'优秀':yE[1]},
                { '指标': '教学方法运用的能力', '极差': yA[2], '较差': yB[2], '中等': yC[2],'良好':yD[2],'优秀':yE[2]},
                { '指标': '问题解决能力', '极差': yA[3], '较差': yB[3], '中等': yC[3],'良好':yD[3],'优秀':yE[3]},
                { '指标': '网络技术能力', '极差': yA[4], '较差': yB[4], '中等': yC[4],'良好':yD[4],'优秀':yE[4]}
              ]
            }
          }
        }
      })
    };

  </script>
</div>
</body>

</html>